<template>
  <div>
    <address-item @addressChange="addressChange"></address-item>
    <el-table @selection-change="productChange" :data="$root.$data.cart" border style="width: 100%">
      <el-table-column align="center" type="selection"></el-table-column>
      <el-table-column align="center" label="商品图片">
        <template slot-scope="scope">
          <img height="100" :src="baseUrl + scope.row.product.img">
        </template>
      </el-table-column>
      <el-table-column align="center" prop="product.pdesc" label="商品描述"></el-table-column>
      <el-table-column align="center" prop="product.price" label="商品单价"></el-table-column>
      <el-table-column align="center" prop="num" label="商品数量"></el-table-column>
    </el-table>
    <div class="submit">
      <div>商品总价:</div>
      <div style="color: red">￥{{getSum()}}</div>
      <div>商品数量:</div>
      <div style="color: red">{{getProductNum()}}件</div>
      <el-button type="primary" @click="submit" icon="el-icon-tickets">提交订单</el-button>
    </div>
  </div>
</template>

<script>
import addressItem from "../components/addressItem";

export default {
  name: "Settlement",
  data() {
    return {
      checkProducts: null,
      addressId: null
    };
  },
  created() {
    this.getShopCarts();
  },
  methods: {
    getShopCarts() {
      this.axios.get("/shopCart/front/getAll").then(res => {
        this.$root.$data.cart = res.data.data;
      });
    },
    getSum() {
      let sum = 0;
      if (this.checkProducts != null) {
        this.checkProducts.forEach(v => {
          sum += v.num * (v.product.price * 1000);
        });
      }
      return sum / 1000;
    },
    getProductNum() {
      let sum = 0;
      if (this.checkProducts) {
        this.checkProducts.forEach(v => {
          sum += v.num;
        });
      }
      return sum;
    },
    productChange(val) {
      this.checkProducts = val;
      console.log(val);
    },
    addressChange(id) {
      this.addressId = id;
    },
    toIndex() {
      this.$router.push({ path: "/order" });
    },
    submit() {
      if (this.addressId == null) {
        this.$message({
          showClose: true,
          message: "请选择一个地址",
          type: "error"
        });
        return false;
      }
      if (this.checkProducts == null || this.checkProducts.length === 0) {
        this.$message({
          showClose: true,
          message: "请至少选择一个商品",
          type: "error"
        });
        return false;
      }
      let sid = this.checkProducts.map(v => {
        return v.id;
      });
      let shopCart = {
        sid: sid,
        addressId: this.addressId
      };
      this.$myPost(this, "/order/front/create", this.submitSuccess, shopCart);
    },
    submitSuccess(res) {
      this.toIndex();
      if (res.data.status === 201) {
        Object.keys(res.data.data).forEach(k => {
          this.$notify({
            title: "库存不足商品",
            message: k,
            type: "warning"
          });
        });
      }
    }
  },
  components: {
    addressItem: addressItem
  }
};
</script>

<style scoped lang="scss">
.settlement,
.settlement-title {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: 1px solid #999;
  padding-bottom: 5px;
}

.settlement {
  margin-bottom: 20px;
}

.settlement-title {
  text-align: center;
  margin-bottom: 30px;
}

.submit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  > * {
    margin-left: 20px;
  }
}
</style>